<template>
    <div class="page" ref="page">
        <div class="wrap">
            <ul>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>最后一个标题</li>
            </ul>
        </div>
    </div>
</template>

<script>
    import BetterScroll from "better-scroll";
  export default {
    name: 'better-scroll',
    mounted() {
      this.bScroll=new BetterScroll(this.$refs['page'],{
        scrollY:true,//开启纵向滚动
        //开启下拉刷新
        pullDownRefresh: {
          threshold: 50,
          stop: 20
        },
        //开启上拉加载
        pullUpLoad: {
          threshold: 50
        }
      })
      this.bScroll.on("pullingDown",()=>{
        console.log("下拉刷新");
        this.bScroll.finishPullDown()//告诉 better-scroll 数据已加载
      })
      this.bScroll.on("pullingUp",()=>{
        console.log("上拉加载");
        this.bScroll.finishPullUp();//告诉 better-scroll 数据已加载
      })
    }
  };
</script>

<style scoped>
    .page{width:100%;height:96vh;overflow: hidden;}
    .wrap{width:100%;height: auto;}
    .wrap li{width:auto;height:40px;}
</style>
